@import './commonPC/_crumbs.less';
@import './commonPC/_imgDetail.less';
@import './commonPC/_productBox.less';
@import './commonPC/_search.less';
@import './commonPC/_page.less';


.home-box{
    margin: 40px auto 0;
    
}
.img-text{
    border-bottom: 1px solid #E4E4E4;
    &:last-child{
        border-bottom: none;
    }
} 
#infscr-loading {
    bottom: -10px;
    left: 45%;
    position: absolute;
    text-align: center;
    height: 20px;
    line-height: 20px;
    z-index: 100;
    width: 120px;
}

/*左右布局*/
.column-product{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-bottom: 150px;
}
.column-product-left{
    width: 280px;
    
}
.column-product-right{
    width: 860px;
}
.column-product-left{
    .sub-list{
		width:280px;
		background:rgba(248,251,254,0.8);
		border-radius: 10px;
		padding:24px 16px;
		margin: 0 0 24px 0;
        box-sizing: border-box;
		h5{
			font-family: Roboto-Bold;
            font-weight: bold;
			font-size: 18px;
			color: #121212;
			line-height: 28px;
			margin: 0 0 24px 0;
            padding-left: 33px;
            box-sizing: border-box;
		}
        h5.best-brands{
            background: url(../images/product/ic_brands@2x.png) no-repeat center left/21px auto;
        }
        h5.best-products{
            background: url(../images/product/ic_products@2x.png) no-repeat center left/21px auto;
        }
        h5.quick-links{
            background: url(../images/product/ic_links@2x.png) no-repeat center left/21px auto;
        }
		li{
			font-size: 16px;
            font-family: Roboto-Regular;
            font-weight: 400;
            line-height: 20px;
			color: #666666;
			margin: 0 0 24px 0;
            a{
                &:hover{
                    color: #177FE9;
                    text-decoration: underline;
                }
            }
			&.current{
				a{color:#177FE9;}
			}
		}
	}
	.current{
		&.quick-list{
			display: block;
		}
	}
	.quick-list{
		display: none;
		li{
			cursor: pointer;
			&.current{
				color:#177FE9;
			}
            &:hover{
                color:#177FE9;
                text-decoration: none;
            }
		}
	}
}
.column-product-right{
    .title{
		display: flex;
		margin: 0 0 24px 0;
		align-items: center;
		h3{
			font-family: Roboto-Medium;
			font-size: 28px;
			color: #121212;
			letter-spacing: 1px;
			line-height: 42px;
			margin: 0 32px 0 0;
		}
		.attention{
			background: url("../images/index/mobile/favorite@3x.png");
			background-size:24px 24px;
			width: 24px;
			height: 24px;
			&.favorited{
				background:url('../images/index/mobile/favorited@3x.png');
				background-size:24px 24px;
			}
			
		}
	}
	.user{
		display: flex;
		line-height: 32px;
		margin: 0;
		img{
			width:32px;
			height: 32px;
            border-radius: 10px;
            overflow: hidden;
		}
		.name{
			font-size: 16px;
			color: #666666;
			letter-spacing: 0.5px;
			margin: 0 0 0 16px;
			a{
				color:#177FE9;
			}
		}
		.time{
			font-size: 16px;
			color: #999999;
			letter-spacing: 0.5px;
			margin: 0 0 0 16px;
		}
	}
	.abstract{
		font-size: 18px;
		color: #333333;
		letter-spacing: 0.5px;
		line-height: 26px;
		margin: 0 0 40px 0;
		overflow: hidden;
	    position: relative;
        p{
            margin-top: 16px;
        }
		.more{
			font-size: 18px;
			color: #177FE9;
			letter-spacing: 0.5px;
			line-height: 26px;
			position: absolute;
			right:0;
			bottom: 0;
			padding: 0 15px 0 35px;
			background: #fff;
		}
	}
    .production-detail{
		margin:0 0 32px 0;
		background: #FFFFFF;
		border: 1px solid #E7F2FC;
		box-shadow: 0 2px 8px 0 rgba(153,153,153,0.12);
		border-radius: 10px;
		padding: 32px 24px;
		&.detail-ellipsis{
			.details{
				max-height: 206px;
				overflow: hidden;
                border-top: 1px solid #E4E4E4;
                padding-top: 22px;
                font-size: 18px;
                font-family: Roboto-Regular;
                font-weight: 400;
                color: #333333;
                line-height: 28px;
			}
			.view-more{
				margin-top: -16px;
				i{
					display:inline-block;
					width:10px;
					height:5.8px;
					background-image: url("../images/index/down@2x.png");
					background-size:10px 5.8px;
					margin-left:8px;
				}
			}
		}
        .details{
			border-top: 1px solid #E4E4E4;
            padding-top: 22px;
            font-size: 18px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #333333;
            line-height: 28px;
            p{
                margin-top: 16px;
            }
		}
		.view-more{
			font-family: Roboto-Medium;
			display: block;
			color: #177FE9;
			letter-spacing: 0.5px;
			text-align: center;
			background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 23%, #FFFFFF 59%, #FFFFFF 100%);
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-size: 810px 40px;
		    position: relative;
		    &.down{
		    	i{
		    		display:inline-block;
					width:10px;
					height:5.8px;
					background-image: url("../images/index/up@2x.png");
					background-size:10px 5.8px;
					margin-left:8px;
					vertical-align:middle;
		    	}
		    }
		}
	}
}
.about-list{
    margin: 40px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    &::after{
        width: 1px;
        height: 100%;
        background: #E4E4E4;
        position: absolute;
        left: 50%;
        top: 0;
        content: '';
        display: block;
    }
    ul{
        width: 345px;
        li{
            padding-left: 23px;
            line-height: 22px;
            margin-top:10px;
            &:first-child{
                margin: 0;
            }
        }
        &.about-list-ok{
            li{
                background: url(../images/product/ic_1@2x.png) no-repeat 2px 7px;
                background-size: 14px auto;
            }
        }
        &.about-list-no{
            li{
                background: url(../images/product/ic_2@2x.png) no-repeat 5px 7px;
                background-size: 10px auto;
            }
        }
    }
}
.detail-box{
    position: relative;
    padding: 32px 0 40px;
    border-bottom: 1px solid #E4E4E4;
    .num{
        position:absolute;
        left: 0;
        top:0;
        width: 80px;
        height: 40px;
        line-height: 32px;
        font-size: 20px;
        background: #FA3D5B;
        border-radius: 18px 18px 18px 0;
        color: #fff;
        font-family: Roboto-Medium;
        font-weight: 500;
        text-align: center;
        display: block;
        z-index: 1;
    }
    .num.num2{
        background: #DC3BFF;
    }
    .num.num3{
        background: #FFAA4A;
    }
    .num.num4{
        background: #177FE9;
    }
    .detail-imgtext{
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        .detail-img{
            width: 178px;
            a{
                width: 178px;
                height: 178px;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                border:1px solid #E7F2FC;
                border-radius: 8px;
            }
            img{
                width: 178px;
                height: 178px;
                display: block;
            }
        }
        .detail-text{
            width: 610px;
            .title{
                margin: 8px 0 12px;
                font-size: 18px;
                font-family: PlayfairDisplay-Black;
                font-weight: 900;
                color: #121212;
                line-height: 20px;
            }
            .tips{
                height: 32px;
                font-size: 24px;
                font-family: Roboto-Regular;
                font-weight: 400;
                color: #121212;
                line-height: 32px;
                display: flex;
                justify-content: space-between;
                .star{
                    width: 105px;
                    display: flex;
                    margin-top: 6px;
                    .blue,.half,.gray{
                        width: 20px;
                        height: 20px;
                        background-size: 20px 20px;
                        margin:0 1px 0 0;
                        display: inline-block;
                    }
                    .blue{
                        background-image: url("../images/0BF31614-20FC-4D52-BFC5-691D6EAE7B03@2x.png");
                    }
                    .half{
                        background-image: url("../images/331974AE-E488-435E-97BD-0A6849B35E40@2x.png");
                    }
                    .gray{
                        background-image: url("../images/95EA68AB-A5E8-4829-8E05-989D4C143461@2x.png");
                    }
                } 
            }
            .option{
                margin-top: 36px;
                line-height: 40px;
                display: flex;
                justify-content: space-between;
                p{
                    font-size: 16px;
                    font-family: Roboto-Regular;
                    font-weight: 400;
                    display: flex;
                    span{
                        opacity: .4;
                        color: #121212;
                        text-decoration:line-through;
                    }
                    span.curr{
                        font-size: 22px;
                        font-family: Roboto-Medium;
                        font-weight: 500;
                        color: #FF3164;
                        text-decoration: none;
                        opacity: 1;
                        margin-right: 8px;
                    }
                }
                .buy{
                    width: 240px;
                    height: 40px;
                    line-height: 40px;
                    background: #177FE9;
                    border-radius: 20px;
                    text-align: center;
                    &:hover{
                        box-shadow: 0px 2px 4px 0px rgba(23, 127, 233, 0.6);
                    }
                    a{
                        font-size: 14px;
                        font-family: Roboto-Medium;
                        font-weight: 500;
                        color: #FFFFFF;
                        padding-right: 13px;
                        display: inline-block;
                        background: url(../images/product/ic_5@2x.png) no-repeat right center/6px auto;
                    }
                }
            }
        }
    }
}
.recommend{
	font-family: Roboto-MediumItalic;
	font-size: 28px;
	color: #121212;
	letter-spacing: 0.5px;
	line-height: 38px;
	font-style:italic;
	padding:16px 0 40px 0;
	border-top:1px solid #121212;
}
.recommend-more{
	display:block;
	margin:10px auto 20px
}
.recommend-just{
    padding-bottom: 0;
}
.column-product-left .sub-list li a:hover{ text-decoration: none;}
.column-product-right .div-ellipsis{
    max-height: 68px;
}
